<template>
  <div id="app">
    <h2>我是APP组件</h2>
    <!--利用router-link-->
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link v-bind:to="'/user/' + userId">用户</router-link>
    <!-- 用对象传参数-->
    <router-link
      :to="{ path: '/profile', query: { name: 'zhangsan', sexy: '男' } }"
      >档案</router-link
    >
    <router-link to="/home" tag="button" repalce>首页不带返回历史</router-link>
    <hr />
    <!--通过代码修改路由-->
    <button @click="homeclick">首页</button>
    <button @click="userclick">用户</button>
    <hr />
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      userId: 'zhangsan' // 动态路由userid
    }
  },
  methods: {
    homeclick () {
      // 通过代码修改路由
      // push => pushstate
      // repalce this.$router.repalce('/home')
      console.log('homeclick')
      this.$router.push('/home')
    },
    userclick () {
      this.$router.push('/user/' + this.userId)
    }
  }
}
</script>

<style>
.router-link-active {
  color: red;
}
</style>
